<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Files on Go Pro </ion-title>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Files on Go Pro</ion-title>
    </ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-header>

  <ion-text
    color="medium"
    *ngIf="filesOnGoPro.length === 0"
    class="ion-padding ion-text-center"
  >
    <p>No Files on Go Pro Camera</p>
  </ion-text>

  <ion-list>
    <ion-item
      *ngFor="let file of filesOnGoPro"
      (click)="previewFileFromGoProCamera(file)"
    >
      <ion-icon
        [name]="file.fileType == 'video' ? 'videocam-outline' : 'image-outline'"
        slot="start"
      ></ion-icon>
      <ion-label>{{ file.fileName }}</ion-label>
      <ion-note slot="end">{{ file.fileSize }} MB</ion-note>
    </ion-item>
  </ion-list>
</ion-content>
